<template>
	<view>
		<view style="height: 500rpx;"><qiun-data-charts type="column" :opts="opt" :chartData="chartData" background="none" /></view>
		<view style="height: 500rpx;"><qiun-data-charts type="column" :opts="opt1" :chartData="chartData1" background="none" /></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			chartData: {},
			chartData1: {}
		};
	},
	props: {
		inc: {
			type: Array | Object,
			default() {
				return null;
			}
		}
	},
	created() {
		this.init();
	},
	watch: {
		inc(n) {
			this.init();
		}
	},
	methods: {
		init() {
			if (this.inc) {
				
				let series = [],
					series1 = [],
					name = [],
					data = [],
					data1 = [],
					res = [],
					res1 = [];
				for (let j in this.inc) {
					for (let i in this.inc[j].data) {
						name.push(this.inc[j].data[i].name);
					}
					break;
				}
				for (let j in this.inc) {
					data.push(
						this.inc[j].data.map(it => {
							return it.balance;
						})
					);
					data1.push(
						this.inc[j].data.map(it => {
							return it.account;
						})
					);
				}
				for (let i in name) {
					let a = [];
					for (let j in data) {
						a.push(data[j][i]);
					}
					res.push(a);
				}
				for (let i in name) {
					let a = [];
					for (let j in data1) {
						a.push(data1[j][i]);
					}
					res1.push(a);
				}
				for (let i in name) {
					series.push({
						name: name[i],
						type: 'point',
						data: res[i]
					});
					series1.push({
						name: name[i],
						type: 'point',
						data: res1[i]
					});
				}

				// for (let j in this.inc[0].data) {
				// 	series.push({
				// 		name: this.inc[0].data[j].name,
				// 		type: 'point',
				// 		data: this.inc[j].data.map(it => {
				// 			return it.balance;
				// 		})
				// 	});
				// 	series1.push({
				// 		name: this.inc[0].data[j].name,
				// 		type: 'point',
				// 		data: this.inc[j].data.map(it => {
				// 			return it.account;
				// 		})
				// 	});
				// }
				let chartData = {
					categories: this.inc.map(i => {
						return i.name.replace('中国', '').split('银行')[0] + '银行';
					}),
					series: series
				};
				let chartData1 = {
					categories: this.inc.map(i => {
						return i.name.replace('中国', '').split('银行')[0] + '银行';
					}),
					series: series1
				};
				this.chartData = chartData;
				this.chartData1 = chartData1;
			} else {
				this.chartData = {};
				console.error('开', '开户情况无数据');
			}
		}
	},
	computed: {
		opt() {
			return {
				extra: {
					column: {
						type: 'stack'
					}
				},
				yAxis: {
					showTitle: true,
					data: [
						{
							titleFontSize: 12,
							position: 'left',
							title: '余额',
							min: 0
						}
					]
				}
			};
		},
		opt1() {
			return {
				extra: {
					column: {
						type: 'stack'
					}
				},
				yAxis: {
					showTitle: true,
					data: [
						{
							titleFontSize: 12,
							position: 'left',
							min: 0,
							title: '专户数',
							textAlign: 'left'
						}
					]
				}
			};
		}
	}
};
</script>

<style></style>
